<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>账号：<input placeholder="账号" v-model="account"></p>
        <p>密码：<input type="password" placeholder="密码" v-model="password"></p>
        <p><label><input type="checkbox" value="auto" v-model="autoLogin">十天免登录</label></p>
        <button @click="loginBtn">登录</button>
    </div>
    <script>
        const {createApp} = Vue;
        const app = createApp({
            data(){
                return{
                    account:'',
                    password:'',
                    autoLogin:''
                }
            },
            methods:{
                loginBtn(){
                    // 使用ajax，将数据提交给后端servlet程序
                    const xhr = new XMLHttpRequest()
                    // 设置请求方式和路径
                    xhr.open("get","/demo/login?account="+this.account+"&password="+this.password+"&autoLogin="+this.autoLogin)
                    // 发送请求
                    xhr.send()
                    // 注册状态监听的函数
                    xhr.addEventListener("readystatechange",function () {
                        // 判断状态
                        if(xhr.readyState === 4 && xhr.status === 200){
                            // 判断成立，说明后端发回具体的数据
                            // console.log(xhr.responseText)
                            // const result = JSON.parse(xhr.responseText)
                            const result = xhr.responseText
                            if(result == '账号不能为空'){
                                alert("账号不能为空")
                            }else if( result == ''){
                                alert("密码不能为空")
                            }else if( result == '账号或密码错误'){
                                alert('账号或密码错误')
                            }else{
                                alert('登录成功')
                                // const res2 = JSON.parse(xhr.responseText)
                                sessionStorage.setItem("loginUser",result)
                                window.location.href = "/demo/index.html"
                            }
                        }else{

                            console.log("请求失败")
                        }
                    })
                }
            }
        })
        app.mount('#app')
    </script>
</body>
</html>